<template>
  <div class="T_all">
    <!-- 标题 -->
    <!--  -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我为你倾其所有~"
      :immediate-check="false"
      @load="getOrderData"
    >
      <div @click="Go_ServiceDetails(item)" class="T_one" v-for="(item, id) in orderData" :key="id">
        <div class="T_left">
          <span class="left_wenzi">宠物寄养</span>
          <button class="left_anniu">订单详情</button>
          <div class="left_status" v-show="item.po_status == 3">已取消</div>
          <div class="left_status" v-show="item.po_status == 2">已完成</div>
          <div class="left_status" v-show="item.po_status == 1">进行中</div>
        </div>
        <!-- 中间 -->
        <div class="T_two">
          <div class="T_tu">
            <img src="../assets/img/cha1.png" alt="" />
          </div>
          <div class="T_zi">
            <span class="zi1">服务宠物:{{ item.po_petName }}</span>
            <!-- <span class="zi2">服务日期:{{ item.po_time }}</span> -->
            <span class="zi2">下单时间:{{ $moment(parseInt(item.po_number)).format('YYYY-MM-DD HH:mm:ss') }}</span>
            <span class="zi3">订单总价:￥{{ item.po_price }}</span>
          </div>
        </div>
        <!-- 底部 -->
        <!-- <div>
        <button class="dibu_anniu">服务报告</button>
      </div> -->
      </div></van-list
    >
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  ...mapState[('uid', 'haveOrder')],
  ...mapMutations['updataHaveOrder'],
  props: ['order_status'],
  data() {
    return {
      orderData: [],
      order_status_res: this.order_status,
      pageNum: 0, //用于limit查询 从第一个元素开始查询
      pageSize: 5, //每次查询5个
      // List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
      loading: false,
      finished: false,
    };
  },

  methods: {
    getOrderData() {
      // console.log(this);
      // 为null时查询全部
      // console.log('点击的订单类型', this.order_status_res);

      if (!this.order_status_res) {
        const url = 'order/select';
        let params = `uid=${this.$store.state.uid}&&pageNum=${this.pageNum}&&pageSize=${this.pageSize}`;
        this.axios.post(url, params).then(res => {
          // 数据全部加载完成
          if (res.data.code == 201) {
            this.finished = true;
            return;
          }

          console.log(res);
          this.$store.commit('updataHaveOrder', true);
          this.orderData.push(...res.data.data);
          this.pageNum += 5;
          // 加载状态结束
          this.loading = false;
          return;
        });
      }
      if (this.order_status_res == '1') {
        const url = 'order/select';
        let params = `uid=${this.$store.state.uid}&&status=${this.order_status_res}&&pageNum=${this.pageNum}&&pageSize=${this.pageSize}`;
        // this.orderData = [];
        this.axios.post(url, params).then(res => {
          if (res.data.code == 201) {
            this.finished = true;
            return;
          }
          console.log(res);
          this.$store.commit('updataHaveOrder', true);
          this.orderData.push(...res.data.data);
          this.pageNum += 5;
          // 加载状态结束
          this.loading = false;
          return;
        });
      }
      if (this.order_status_res == '2') {
        const url = 'order/select';
        let params = `uid=${this.$store.state.uid}&&status=${this.order_status_res}&&pageNum=${this.pageNum}&&pageSize=${this.pageSize}`;
        // this.orderData = [];
        this.axios.post(url, params).then(res => {
          if (res.data.code == 201) {
            this.finished = true;
            return;
          }
          console.log(res);
          this.$store.commit('updataHaveOrder', true);
          this.orderData.push(...res.data.data);
          this.pageNum += 5;
          // 加载状态结束
          this.loading = false;
        });
      }
      if (this.order_status_res == '3') {
        const url = 'order/select';
        let params = `uid=${this.$store.state.uid}&&status=${this.order_status_res}&&pageNum=${this.pageNum}&&pageSize=${this.pageSize}`;
        // this.orderData = [];
        this.axios.post(url, params).then(res => {
          if (res.data.code == 201) {
            this.finished = true;
            return;
          }
          console.log(res);
          this.$store.commit('updataHaveOrder', true);
          this.orderData.push(...res.data.data);
          this.pageNum += 5;
          // 加载状态结束
          this.loading = false;
        });
      }
    },

    // 跳转到订单详情页
    Go_ServiceDetails(item) {
      this.$router.push({
        name: 'servicedetails', //跳转至 servicedetails 路由
        query: {
          po_id:item.po_id,
          pet_id: item.pet_id,
          po_time: item.po_time,
          po_price: item.po_price,
          po_linkman: item.po_linkman,
          po_userPhone: item.po_userPhone,
          po_petName: item.po_petName,
        },
      });
      this.$route.query.name;
    },
  },
  watch: {
    // order_status_res(newValue, oldValue) {
    // console.log(newValue);
    // this.getOrderData();
    // },
  },
  mounted() {
    // console.log(this.$store.state.uid);
    this.getOrderData();
  },
};
</script>

<style>
.T_all {
  overflow: hidden;
  height: 100%;
  /* background-color: #f2f2f2; */
  /* padding: 0.1rem 0 0.5rem 0; */
}
.T_one {
  margin: 2rem auto;
  width: 35rem;
  /* background-color: #f2f2f2; */
  /* height: 18rem; */
  border-radius: 1rem;
  padding-bottom: 2rem;
  box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2), 0 0.2rem 2rem 0 rgba(0, 0, 0, 0.19);
}
.T_left {
  display: flex;
}
.left_wenzi {
  font-size: 2rem;
  font-weight: bold;
  display: block;
  padding-top: 2rem;
  margin-left: 2rem;
}
.left_anniu {
  margin-left: 0.5rem;
  font-weight: bold;
  margin-top: 2rem;
  background-color: #ffffff;
  color: #92909f;
  border: solid #92909f 1px;
  border-radius: 3rem;
}
.left_status {
  padding-top: 2.5rem;
  margin-left: 10rem;
  color: #66b8dc;
}
.T_two {
  display: flex;
}
.T_tu img {
  width: 7rem;
  height: 7rem;
  margin-left: 2rem;
  margin-top: 2rem;
}
.zi1 {
  margin-top: 3rem;
}
.zi2 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.zi1,
.zi2,
.zi3 {
  display: block;
  margin-left: 2rem;
}
.dibu_anniu {
  font-size: 1.5rem;
  border-radius: 2rem;
  margin-top: 1rem;
  margin-left: 1.5rem;
  background-color: #ffffff;
  color: #92909f;
  border: #92909f solid 1px;
  padding: 0.5rem 1rem;
}
</style>
